<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>微博发布效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .weibo {
      width: 600px;
      border: 1px solid #ccc;

      margin: 100px auto;
      padding: 10px;

    }

    .weibo-text {
      width: 590px;
      height: 140px;
      padding: 5px;
      border: 1px solid #ccc;
      outline: none;
      resize: none;
    }

    .weibo-text:focus {
      border-color: #f60;
    }

    .weibo-btn {
      width: 80px;
      height: 30px;
      background-color: #f90;
      color: #fff;
      border: 0 none;
      margin-top: 5px;
      border-radius: 3px;
      cursor: pointer;
      outline: 0 none;
    }

    .weibo-list {
      padding-top: 10px;
    }

    .weibo-list li {
      font-size: 14px;
      line-height: 30px;
      border-bottom: 1px dotted #ccc;
      overflow: hidden;
    }

    .weibo-list li p {
      float: left;
    }

    .weibo-list li span {
      float: right;
      cursor: pointer;
    }

    .weibo-list li input {
      height: 24px;
      line-height: 24px;
      width: 300px;
      font-size: 14px;
      border: 0 none;
    }

    .time {
      margin-right: 10px;
      font-style: normal;
      float: right;
    }
  </style>
</head>

<body>
  <div class="weibo">
    <textarea class="weibo-text"></textarea>
    <input class="weibo-btn" value="发布" type="button">
    <ul class="weibo-list">
      <!-- <li>
            <p class="content">快来收了这九款用上就停不下来的应用吧！！</p>
            <span class="time"></span>
            <span class="del">删除</span>
        </li> -->
    </ul>
  </div>
</body>
<script>
     function patchZero(v) {
    return v < 10 ? '0' + v : v;
  }

  function formatDate() {
    var now = new Date();
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    var d = now.getDate();
    var h = now.getHours();
    var mm = now.getMinutes();
    var s = now.getSeconds();
    return y + '-' + patchZero(m) + '-' + patchZero(d) + ' ' + patchZero(h) + ":" + patchZero(mm) + ':' + patchZero(s);
  }

  

var text=document.querySelector('.weibo-text');
var dianji=document.querySelector('.weibo-btn');
var ul=document.querySelector('.weibo-list');
// 实现发布
// 注册事件给按钮点击时
dianji.onclick=function(){
  // 获取储存文本内容
  var content=text.value;
 var time=formatDate();
 console.log(time);
  // 给页面增加一个标签li元素
  var li=document.createElement('li');
  // 给li标签加上元素标签内容
  li.innerHTML='<p class="content">'+content+'</p>'
           '<span class="del">删除</span>'+'<span class="time data1-id">'+time+ '</span>';

  ul.insertBefore(li,ul.children[0]);

  data1.unshift({
    content:content,
    time:time
});
var shujugeshi=JSON.stringify(data1);
localStorage.setItem('shujuchucun',shujugeshi);
  text.value='';
}

// var spans=document.querySelectorAll('.weibo-list span');
//   ul.onclick=function(e){
//   if(e.target.nodeName==='SPAN'){
//       // 通过目标获取这个span
//   var _this=e.target;
//   // 通过span找到它的父元素li
//   var li=_this.parentNode;
//   ul.removeChild(li);
//   }
// }
// for(var i=0;i<spans.length;i++){
//   spans[i].onclick=function(){
//   var li=this.parentNode;
//   var ul=li.parentNode;
//   ul.removeChild(li);
//   }
  
// }
// 实现删除

// 用选择器获取所有的span元素
var spans=document.querySelectorAll('.weibo-list span');
// 使用委托事件实现点击删除委托到固定的前辈元素身上ul
ul.onclick=function(e){
  if(e.target.nodeName==='SPAN'){
  // 使用.target获得触发目标事件的元素
  var span=e.target;
  // 获取元素的前代元素
 var li=span.parentNode;
  ul.removeChild(li);
  }
}

// 储存数据


// 提取数据
var shujutiqu=localStorage.getItem('shujuchucun');
var data1=JSON.parse(shujutiqu);
data1.forEach(function(e,i){
    var li1=document.createElement('li');
    li1.innerHTML='<p class="content">'+e.content+'</p>'
            '<span class="time data-id">'+e.time+'</span><span class="del">删除</span>';
    ul.appendChild(li1);
})


</script>
</html>
